<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRouter, RouterView } from 'vue-router'
import banner from '../../components/TeacherBanner.vue'
import { getUserData } from '../../utils';
const router = useRouter();
const goToPage = pageName => router.push(pageName);
const show = ref(true)
const aside = ref(null);

// 获得用户信息
// 获得用户信息
let userData;
if (getUserData() != undefined) {
    userData = getUserData();
}

//页面刷新重新挂载的时候判断路由，添加样式
onMounted(() => {
    const lis = aside.value.children;
    const reg = new RegExp(currentPath.value)
    for (let i = 0; i < lis.length; i++) {
        lis[i].classList.remove('chooseLi');
        if (reg.test(lis[i].hash))     //给当前活跃的路由加上样式
        {
            lis[i].classList.add('chooseLi');
        }
    }
    if (userData.role == 3) {
        let aside = document.querySelector('.aside')?.querySelector('ul');
        let aBox = document.createElement("li");
        let back = document.createElement('a')
        back.href = '../../../departmentHead.html'
        back.innerHTML = '系主任端入口'
        back.style = 'display: flex; justify-content: center'
        aBox.appendChild(back);
        aside.appendChild(aBox);
    }
})

//获得当前的路径的hash，监听浏览器hashchange事件
const currentPath = ref(window.location.hash)
window.addEventListener('hashchange', function changeStyle(){
    currentPath.value = window.location.hash;
    const lis = aside.value.children;
    const reg = new RegExp(currentPath.value)
    for (let i = 0; i < lis.length; i++) {
        lis[i].classList.remove('chooseLi');
        if (reg.test(lis[i].hash))     //给当前活跃的路由加上样式
        {
            lis[i].classList.add('chooseLi');
        }
    }
})
</script>

<template>
    <banner :nowPage="-1" />
    <div class="container">
        <div class="aside">
            <ul ref="aside" style="width: 100%;">
                <a href="#/MyCourse" class="choice">我的课程</a>
                <a href="#/MyTeam" class="choice">我的团队</a>
            </ul>
        </div>
        <div class="main">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    position: relative;
    padding-top: 60px;
    display: flex;
    justify-content: space-between;
}

.aside {
    width: 14%;
    box-sizing: content-box;
    padding-top: 5%;
    background: url(../../assets/images/teacher/public/TechLife-RemoteLife.svg) no-repeat bottom;
    background-size: 100%;
    background-color: #dbdde3;
}

.aside ul {
    width: 100%;
    height: 100%;
    padding: 0%;
}

.aside a
{
    height: 64px;
    width: 100%;
    line-height: 34%;
    list-style: none;
    display: flex;
    justify-content: center;
    font-size: 17px;
    font-family: Source Han Sans CN;
    font-weight: normal;
    color: #707070;
    align-items: center;
}

.chooseLi {
    background-color: #f0f1f3;
    box-shadow: 0px 0px 10px 0.08px #aaa;
}

.choice {
    font-size: 16.5px;
}

.main {
    background-color: #f1f2f6;
    width: 86%;
    box-sizing: content-box;
    padding: 6%;
    padding-bottom: 2.85%;
    padding-top: 2.85%;
}
</style>
